import Link from 'next/link';
import { useState, useEffect } from "react";
import { withRouter } from "next/router";
import { replaceImageUrl, targetUrl } from '@/utils';
// css
import styles from '@/styles/CommonDetail.module.scss';
import rightStyles from '@/styles/CommonComponent.module.scss';
// 组件
import Breadcrumb from '@/components/Breadcrumb';
import Detail from '@/pages_components/detail/Detail.text';
import _404 from '@/pages/404';
// api
import { getActivityDetail, getActivityRule } from '@/api/coupon';

// 相关推荐
const Related = ({ list }) => {
    return (
        <div className={rightStyles['hot-pro-list']}>
            <h2>相关推荐</h2>
            {
                list.map((data,index) => {
                    return (
                        <div className={rightStyles['item']} key={index}>
                            <Link href={targetUrl(data)}>
                                <a target="_blank">
                                    <img src={replaceImageUrl(data.thumbnail)} alt="" />
                                    <h3>{`${data.goodsName}`}</h3>
                                </a>
                            </Link>
                            <p className={rightStyles['price']}>
                                ￥<em>{data.showPrice}</em><span>起</span>
                            </p>
                        </div>
                    )
                })
            }
        </div>
    )
}

// 规则
const Rule = ({ rule }) => {
    return (
        <div className={styles['rule']}>
            <span>规则：</span>
            <p dangerouslySetInnerHTML={{__html: rule}}></p>
        </div>
    )
}

const Activity = ({ router, id, from }) => {

    const [data, setData] = useState([]);
    const [list, setList] = useState([]);
    const [rule, setRule] = useState('');
    const [prevPage, setPrevPage] = useState(() => {
        if(from.includes('/ticket')){
            return '景点门票'
        }else if(from.includes('/hotel')){
            return '酒店住宿'
        }else if(from.includes('/line')){
            return '线路预订'
        }else if(from.includes('/car')){
            return '用车包车'
        }
        return '/'
    })

    useEffect(() => {
        getActivityDetail(id).then(res => {
            let { code, data: { records } } = res;
            if(code === 0 && records && records.length){
                const _data = JSON.parse(records[0].activityDescription) || [];
                const _list = records.filter(item => {
                    const { projectId, categoryId } = item;
                    return projectId === 1 || projectId === 3 || (projectId === 2 && (categoryId === 1 || categoryId === 2))
                });
                setData([..._data]);
                setList([..._list]);
            }
        });

        getActivityRule(id).then(res => {
            const { code, data } = res;
            let html = '';
            if(code === 0 && data){
              html = data.replace(/\n/g, '<br/>');
            }else{
              html = '暂无规则';
            }
            setRule(html);
        });
    }, []);

    if(!id){
        return <_404 />
    }

    return (
        <div className={[styles['common-detail-page'], styles['activity-detail-page']].join(' ')}>
            <div className="max-content">
                {/* 面包屑 */}
                <Breadcrumb params={[{ name: prevPage, url: from}, { name: '活动详情', url: router.asPath}]} />
                {/* 详情 */}
                <div className={styles['common-wrap']}>
                    <section className={styles['left']}>
                        <h3 className={styles['title']}>活动介绍</h3>
                        <Rule rule={rule} />
                        <Detail data={data} />
                    </section>
                    <aside className={styles['right']}>
                        <Related list={list} />
                    </aside>
                </div>
            </div>
        </div>
    )
}
Activity.getInitialProps = async (ctx) => {
    const { query: { id, from = '' } } = ctx;
    return { id, from }
}

export default withRouter(Activity)